.design-template{
  height: 250px;
  border: 1px solid #ccc;
  margin: 0 10px 20px;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  background: var(--el-bg-color);
  overflow: hidden;
  position: relative;

  &:hover{
    box-shadow: 0 0px 10px #eee;
  }

  &-title{
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    color: var(--el-color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px
  }

  &-render{
    width: 800px;
    height: 800px;
    zoom: 0.25;
  }

  &-cover{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 88;

    &::after{
      content: ' ';
      width: 100%;
      height: 20px;
      position: absolute;
      left: 0;
      bottom: 0;
      backdrop-filter: blur(1px);
    }
  }
}